var div = document.querySelector('div');

function 打印数组(array) {
    div.innerHTML = '';

    for (var i in array) {
        var span = document.createElement('span');
        span.style.display = 'inline-block';
        span.style.backgroundColor = 'red';
        span.style.marginRight = '5px';
        span.style.width = '30px';
        span.style.height = `${30 + array[i] * 30}px`;

//        span.textContent = array[i];
//        span.style.textAlign = 'center';
//        span.style.color = 'black';
//        span.style.lineHeight = span.style.height;
        div.appendChild(span);
    }
    //div.innerHTML += `<p>[${array.join(', ')}]</p>`;
}

var array = [9, 5, 2, 7, 3, 6, 8, 4, 1];

var i = 0;
var j = 0;
setInterval(function () {
    // 冒泡排序的其中一步（两两比较 + 可能的交换）
    if (j >= array.length - i - 1) {
        j = 0;
        i++;
        if (i >= array.length - 1) {
            return;
        }
    }
    if (array[j] > array[j + 1]) {
        var t = array[j];
        array[j] = array[j + 1];
        array[j + 1] = t;
    }
    j++;

    打印数组(array);
}, 1000/2);